<template>
	<div class="flex items-center h-full float-right">
		<router-link to="" class="flex items-center mr-16">
			<a-avatar :src="userInfo.thumbnailPath || '/avatar.png'" class="antd-pro-global-header-index-avatar"/>
			<span :title="userInfo.nickName" class="ml-4 text-16 overflow" style="max-width: 200px; color: rgba(0, 0, 0, .65)">{{ userInfo.nickName }}</span>
		</router-link>
		<!--    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />-->
		<a-icon @click="handleLogout" class="mr-22 text-22 cursor-pointer" type="logout"/>
	</div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'RightContent',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showMenu: true
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    handleLogout() {
      this.$confirm({
        title: '提示',
        content: '您确定要退出登录吗？',
        cancelText: '取消',
        okText: '确定',
        onOk: () => {
          return this.$store.dispatch('Logout').then(() => {
            window.location.href = '/'
          })
        },
        onCancel() {
        }
      })
    }
  }
}
</script>
